/**
* 左边菜单
*/ 
<template>
  <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b">
    <div class="logobox">
      <img class="logoimg" src="../assets/img/logo.png" alt="">
    </div>
    <el-submenu>
      <template slot="title">
        <i class="iconfont"></i>
        <span>首页</span>
      </template>
      <el-menu-item-group>
        <el-menu-item :index="'/welcome'">
          <i class="iconfont" :class="li-icon-xiangmuguanli"></i>
          <span>欢迎页</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu v-for="menu in allmenu" :key="menu.id" :index="menu.text">
      <template slot="title">
        <i class="iconfont" :class="menu.attributes.icon"></i>
        <span>{{menu.text}}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item v-for="chmenu in menu.children" :index="'/'+chmenu.attributes.url" :key="chmenu.id">
          <i class="iconfont" :class="chmenu.attributes.icon"></i>
          <span>{{chmenu.text}}</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>
<script>
import { menu } from '../api/userMG'
import utilApi from '../utils/jwtutils'

export default {
  name: 'leftnav',
  data() {
    return {
      collapsed: false,
      allmenu: []
    }
  },
  // 创建完毕状态(里面是操作)
  created() {
    // 获取图形验证码
    let res = {
      success: true,
      //静态数据
      data: [
        {
          id: 1,
          
          text: '基础管理',
          hasThird: null,
          attributes: {
            icon: 'li-icon-xiangmuguanli',
            url: null
          },
          children: [
            {
              id: 2,
              text: '商品管理',
              hasThird: 'N',
              attributes: {
                icon: 'icon-cat-skuQuery',
                url: 'goods/Goods',
              },
              children: null
            }
          ]
        },
        {
          id: 33,
          text: '订单管理',
          hasThird: null,
          attributes: {
            icon: 'li-icon-dingdanguanli',
            url: null,
          },
          children: [
            {
              id: 34,
              attributes: {
                icon: 'icon-order-manage',
                url: 'pay/Order',
              },
              text: '交易订单',
              hasThird: 'N',
              children: null
            }
          ]
        },
        {
          id: 71,
          text: '系统管理',
          hasThird: null,
          attributes: {
            icon: 'li-icon-xitongguanli',
            url: null,
          },
          children: [
            {
              id: 72,
              text: '用户管理',
              hasThird: 'N',
              attributes: {
                icon: 'icon-cus-manage',
                url: 'system/user',
              },
              children: null
            },
            {
              id: 174,
              text: '菜单管理',
              hasThird: 'N',
              attributes: {
                icon: 'icon-cms-manage',
                url: 'system/Module',
              },
              children: null
            },
            {
              id: 73,
              text: '角色管理',
              hasThird: 'N',
              attributes: {
                icon: 'icon-news-manage',
                url: 'system/Role',
              },
              children: null
            },
            {
              id: 74,
              text: '公司管理',
              hasThird: 'N',
              attributes: {
                icon: 'icon-cs-manage',
                url: 'system/Dept',
              },
              children: null
            },
            {
              id: 75,
              text: '系统环境变量',
              hasThird: 'N',
              attributes: {
                icon: 'icon-promotion-manage',
                url: 'system/Variable',
              },
              children: null
            },
            {
              id: 76,
              text: '权限管理',
              hasThird: 'N',
              attributes: {
                icon: 'icon-cms-manage',
                url: 'system/Permission',
              },
              children: null
            }
          ]
        },
        {
          id: 128,
          text: '支付管理',
          hasThird: null,
          attributes: {
            icon: 'li-icon-shangchengxitongtubiaozitihuayuanwenjian91',
            url: null,
          },
          children: [
            {
              id: 129,
              text: '支付配置信息',
              hasThird: 'N',
              attributes: {
                icon: 'icon-provider-manage',
                url: 'machine/MachineConfig',
              },
              children: null
            },
            {
              id: 175,
              text: '支付配置',
              hasThird: 'N',
              attributes: {
                icon: 'icon-provider-manage',
                url: 'pay/Config',
              },
              children: null
            }
          ]
        },
        {
          id: 150,
          text: '图表',
          hasThird: null,
          attributes: {
            icon: 'li-icon-shangchengxitongtubiaozitihuayuanwenjian91',
            url: null,
          },
          children: [
            {
              id: 159,
              text: '数据可视化',
              hasThird: 'N',
              attributes: {
                icon: 'icon-provider-manage',
                url: 'charts/statistics',
              },
              children: null
            }
          ]
        }
      ],
      msg: 'success'
    }
    //this.allmenu = res.data
    //测试数据完毕
    
    // 监听
    this.$root.Bus.$on('toggle', value => {
      this.collapsed = !value
    })
  },
  // 一般方法
  methods: {
    // 从后台取出用户菜单信息在左侧菜单栏显示
    refresh_menu:function(){

        // 取出jwt令牌
        let jwt = utilApi.getJwt();
        // 携带jwt令牌访问后台
        menu(jwt).then(res => {
          if (res) {
            this.allmenu = res
          } else {
            this.$message.error("菜单加载失败，请稍后再试！")
            return false
          }
        }).catch(err => {
          this.$message.error('菜单加载失败，请稍后再试！')
        })
    }
  },
  // 钩子方法
  mounted() {
    // 刷新当前左侧菜单栏
    this.refresh_menu()
  }
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
  text-align: left;
}
.el-menu-item-group__title {
  padding: 0px;
}
.el-menu-bg {
  background-color: #1f2d3d !important;
}
.el-menu {
  border: none;
}
.logobox {
  height: 40px;
  line-height: 40px;
  color: #9d9d9d;
  font-size: 20px;
  text-align: center;
  padding: 20px 0px;
}
.logoimg {
  height: 40px;
}
</style>